import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Exchange } from "@react-vant/icons";
import { Swiper, Image,ProductCard, Tag,  hooks, Calendar, Cell} from 'react-vant';
import {Button} from 'antd'
import Calendars from '../../components/Calendar'
type Props = {};



function My({}: Props) {
  const navigate = useNavigate();
   const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
  ];
  
  
  return (
    <div className="box">
      <div className="tops">
        <div style={{ height: "80px" }}></div>
        <div className="toplos">
          <dl>
            <dt style={{ fontSize: "50px" }}>
              <h5>火车票预订</h5>
            </dt>
            <dd style={{ margin: "-10px" }}>
              <span>便捷购票，服务您的每一次出行</span>
            </dd>
          </dl>
        </div>
      </div>
      <div className="bottom1">
        <div className="con1-1">
          <span>北京</span><span><Exchange  /></span><span>上海</span>
        </div>
        <div   className="con2-2">
          <span>6月18日 明天</span>
        </div>
        <div className="con3-3">
          <Button className="onc">查询</Button>
        </div>
        <div className="con3-4">
          <span style={{ float: "right", margin: " 7px 0 0 10px", color: "#ccc" }}>
            北京 上海
          </span>{" "}
          <span style={{ fontSize: "16px",margin: " 7px 0 0 10px" }}>清除历史</span>
        </div>
      </div>
      <div>
      <Swiper className="demo-swiper">
        {images.map((image) => (
          <Swiper.Item key={image}>
            <Image lazyload src={image} />
          </Swiper.Item>
        ))}
      </Swiper>
      </div>
      <div>
          <Calendars></Calendars>
      </div>
      <div className="con2">
        <span style={{ float: "right",fontSize: "22px",  margin: " 13px 0 0 10px" }}>出行快讯</span>
         <span style={{ fontSize: "18px",color: "#ccc", margin: " 13px 0 0 10px" }}>{"更多>"}</span>
      </div>
      <div>
      
      
      </div>
      <div>
      <ProductCard
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品名称"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    />
    <ProductCard
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品名称"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    />
    <ProductCard
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品名称"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    />
      </div>
    </div>
  );
}

export default My;
